const empty = document.querySelector('.empty')
const h1 = document.querySelector('h1')

let name;

// 开始拖动事件
document.addEventListener('dragstart', e => {
  name = e.target.alt
}, false)


// 拖动进行时
document.addEventListener('drag', e => {
  e.target.style.border = '5px dashed red'
  empty.style.border = '5px dashed red'
}, false)

// 拖入事件
document.addEventListener('dragenter', e => {
  empty.firstChild && empty.removeChild(empty.firstChild)
  h1.innerHTML = name
  h1.style.color = 'red'
}, false)

// 结束拖动事件
document.addEventListener('dragend', e => {
  e.target.style.border = '5px solid white'
  empty.style.border = 'none'
  h1.innerHTML = '专属T-shirt定制'
  h1.style.color = 'black'
}, false)

// 元素正在拖动到放置目标时触发
document.addEventListener('dragover', e => {
  e.preventDefault()
})

// 松开鼠标 放置 事件
document.addEventListener('drop', e => {
  e.preventDefault()
  e.target.appendChild(document.querySelector(`img[alt=${name}]`))
},false)

